<template>
    <div>
        <div class="swiper-container" id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="images in item.topImgUrls">
                    <img :src="images" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <dl class="detail01">
            <dt> {{item.name}}</dt>
            <dd>{{item.beginTime}}-{{item.endTime}}</dd>
            <dd>以实际情况为准</dd>
        </dl>
        <ul class="detail02">
            <li>
                <img src="@/assets/travel/images/tel01.png" alt="">电话：
                <a :href="'tel:'+ item.phone" style="color: #1ec8e2;">{{item.phone}}</a>
            </li>
            <li>
                <img src="@/assets/travel/images/dz.png" alt=""> 地址：{{item.address}}
            </li>
        </ul>
        <div class="line10"></div>
        <div class="detail03">
            <h1>简介</h1>
            <p v-html="item.introduction"></p>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';

    export default {
        name: "image-detail",
        props: ['item'],
        updated() {
            new Swiper('#banner', {
                pagination: '#banner .swiper-pagination', // 如果需要分页器
                paginationClickable: true,
                nextButton: '#banner .swiper-button-next', // 如果需要前进后退按钮
                prevButton: '#banner .swiper-button-prev', // 如果需要前进后退按钮
                parallax: true,
                speed: 600,
                loop: true,
                effect: 'coverflow',
                autoplay: 3000, //可选选项，自动滑动
            })
        }
    }
</script>

<style scoped>
    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 55px;
    }
</style>